<p>This rule raises an issue when properties are assigned to <code>this</code> in a constructor instead of being declared as class fields.</p>
<h2>Why is this an issue?</h2>
<p>Modern JavaScript supports class field declarations, which provide a cleaner and more readable way to define class properties compared to
constructor assignments.</p>
<p>When properties are assigned in constructors using <code>this.property = value</code>, the code becomes more verbose and harder to read. Class
field declarations offer several advantages:</p>
<ul>
  <li> <strong>Better readability</strong>: Property declarations are immediately visible at the class level </li>
  <li> <strong>Reduced boilerplate</strong>: No need for constructor code when only setting default values </li>
  <li> <strong>Consistent syntax</strong>: Aligns with modern JavaScript standards and practices </li>
  <li> <strong>Clearer intent</strong>: Makes it obvious which properties belong to the class </li>
</ul>
<p>Class field declarations also work with both public and private properties (using the <code>#</code> prefix), providing a unified approach to
property definition.</p>
<h3>What is the potential impact?</h3>
<p>This issue affects code maintainability and readability. While it doesn’t cause runtime errors, using outdated patterns makes the codebase harder
to understand and maintain. Teams working with modern JavaScript expect to see class field syntax, and constructor-based assignments can appear
outdated or unnecessarily verbose.</p>
<h3>How to fix?</h3>
<p>Move simple property assignments from the constructor to class field declarations. This makes the code more concise and follows modern JavaScript
conventions.</p>
<h4>Non-compliant code example</h4>
<pre data-diff-id="1" data-diff-type="noncompliant">
class Foo {
  constructor() {
    this.foo = 'foo'; // Noncompliant
  }
}
</pre>
<h4>Compliant code example</h4>
<pre data-diff-id="1" data-diff-type="compliant">
class Foo {
  foo = 'foo';
}
</pre>
<h3>Documentation</h3>
<ul>
  <li> <a href="https://github.com/sindresorhus/eslint-plugin-unicorn#readme">eslint-plugin-unicorn</a> - Rule <a
  href="https://github.com/sindresorhus/eslint-plugin-unicorn/blob/HEAD/docs/rules/prefer-class-fields.md">prefer-class-fields</a> </li>
  <li> MDN - Public class fields - <a
  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Public_class_fields">Documentation on public class field
  declarations in JavaScript</a> </li>
  <li> MDN - Private class features - <a
  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_class_fields">Documentation on private class fields and
  methods</a> </li>
  <li> ESLint - no-useless-constructor - <a href="https://eslint.org/docs/latest/rules/no-useless-constructor">Complementary rule to remove empty
  constructors after applying this fix</a> </li>
</ul>
